<template>
  <div class="app-header">
    <div class="content wrap-v1">
      <div class="content-left">
        <a href="/" class="logo sprite_01">my music</a>

        <div class="select-list">
          <div 
            class="select-item"
            v-for="(item, index) in headerLinks"
            :key="item.title"
          >
            <router-link 
              v-if="index < 3" 
              :to="item.link"
            >
              <i className="icon sprite_01"></i>
              {{ item.title }}
            </router-link>
            <a 
              v-else 
              :href="item.link" 
              target="_blank" 
              rel="noopener noreferrer"
            >
              {{ item.title }}
            </a>
          </div>
        </div>
      </div>

      <div class="content-right">
        <a-input v-model:value="value" placeholder="音乐/视频/电台/用户" class="search" />
        <div className="center">创作者中心</div>
        <div className="login">登录</div>
      </div>
    </div>

    <div className="divider"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

import { headerLinks } from "@/common/local-data";

export default defineComponent({
  setup() {
    const value = ref<string>('');

    return {
      headerLinks,
      value
    }
  }
})
</script>

<style scoped lang="less">
@import './index.less';
</style>